<template>
  <div>
     <div class="box" @click="father" >
      <form action="">
        <input type="text"><br>
        <input type="text"><br>
        <!-- 给form表单中的按钮绑定点击事件 -->
        <button @click.prevent.stop="son">提交</button>
      </form>
      <a :href="url" @click.prevent.stop="fn">前往百度</a>
     </div>
   </div>
</template>
 
<script>
export default {
  data() {
    return {
      url:'http://www.baidu.com'
    };
  },
  methods: {
    // 父元素事件
    father(){
      console.log('我是父元素');
    },
    // 子元素事件
    son(e){
      console.log(e);
      console.log("我是表单提交");
      
    },
    fn(){
      console.log('百度跳不过去');
      
    }
  }
};
</script>

<style scoped>
     
</style>
